<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性伸缩比</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .father {
            width: 400px;
            height: 150px;
            background-color: #ff7c7c;

            display: flex;
        }

        .father .div1 {
            width: 50px;
            height: 50px;
            background-color: #9cb857;
        }

        .father .div2 {
            background-color: #bf3fff;
            flex: 0.5;
        }

        .father .div3 {
            background-color: #eec148;
        }

    </style>
</head>
<body>


<div class="father">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>


</body>
</html>